<template>
    <div class="app-container">
        <!-- 患者信息搜索开始 -->
        <el-card class="box-card">
            <el-form ref="queryForm" :model="patientParams" label-width="70px">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="身份证号" porp="idCard">
                            <el-input
                                    v-model="patientParams.idCard"
                                    placeholder="请输入患者身份证号"
                                    clearable
                                    size="small"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleIdCardQuery">加载身份证号</el-button>
                            <el-button type="warning" icon="el-icon-search" size="mini" @click="handleIdCardQuery">加载患者信息</el-button>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="chongzhi">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <!-- 患者信息搜索结束 -->

        <!-- 患者基本信息表单开始 -->
        <el-card class="box-card">
            <el-form ref="form" :model="patientParams" :rules="rules" :inline="true" label-width="88px">
                <el-form-item label="身份证号" prop="idCard">
                    <el-input
                            v-model="patientParams.idCard"
                            placeholder="请输身份证号"
                            clearable
                            size="small"
                            style="width:200px"
                    />
                </el-form-item>
                <el-form-item label="患者姓名" prop="name">
                    <el-input
                            v-model="patientParams.name"
                            placeholder="请输入患者姓名"
                            clearable
                            size="small"
                            style="width:200px"
                    />
                </el-form-item>
                <el-form-item label="患者电话" prop="phone">
                    <el-input
                            v-model="patientParams.phone"
                            placeholder="请输入患者电话"
                            clearable
                            size="small"
                            style="width:200px"
                    />
                </el-form-item>
                <el-form-item label="性别" prop="sex" :formatter="sexFormatter">
                    <el-radio-group v-model="patientParams.sex">
                        <el-radio
                                v-for="d in sexOptions"
                                :key="d.dictValue"
                                :label="d.dictValue"
                                :value="d.dictValue"
                        >{{ d.dictLabel }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker
                            v-model="patientParams.birthday"
                            size="small"
                            style="width:200px"
                            value-format="yyyy-MM-dd"
                            type="date"
                    />
                </el-form-item>
                <el-form-item label="患者年龄" prop="age">
                    <el-input
                            v-model="patientParams.age"
                            :readonly="true"
                            placeholder="请输入患者年龄"
                            clearable
                            size="small"
                            style="width:200px"
                    />
                </el-form-item>
                <el-form-item label="地址信息" prop="address">
                    <el-input
                            v-model="patientParams.address"
                            placeholder="请输入地址信息"
                            clearable
                            style="width:500px"
                            size="small"
                    />
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 患者基本信息表单结束 -->

        <!-- 挂号项目栏开始 -->
        <el-card class="box-card">
            <el-row>
                <el-col :span="12">
                    <el-radio-group v-model="queryDeptParams.regItemId" @change="registeredItemChange">
                        <el-radio-button
                                v-for="d in regItemOptions"
                                :key="d.regItemId"
                                :label="d.regItemId"
                                :value="d.regItemId"
                        >
                            {{ d.regItemName }}
                        </el-radio-button>
                    </el-radio-group>
                </el-col>
                <el-col :span="12">
                    <div style="float:right">
                        <span style="margin-left:20px">挂号费:￥{{ queryDeptParams.regItemAmount }}</span>
                        <el-button type="danger" icon="el-icon-search" :disabled="single" size="small" @click="handleRegistration">挂号收费</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <!-- 挂号项目栏结束 -->

        <el-card>
            <el-form ref="queryDeptForm" :model="queryDeptParams" :inline="true" label-width="68px">
                <el-form-item label="所属科室" prop="deptId">
                    <el-select
                            v-model="queryDeptParams.deptId"
                            placeholder="请选择所属科室"
                            clearable
                            size="small"
                            style="width:200px"
                    >
                        <el-option
                                v-for="d in deptOptions"
                                :key="d.deptId"
                                :label="d.deptName"
                                :value="d.deptId"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="挂号类型" prop="schedulingType">
                    <el-select
                            v-model="queryDeptParams.schedulingType"
                            placeholder="请选择挂号类型"
                            clearable
                            size="small"
                            style="width:200px"
                    >
                        <el-option
                                v-for="dict in schedulingTypeOptions"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="dict.dictValue"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="挂号时段" prop="subsectionType" :formatter="dataTypeFormatter" >
                    <el-select
                            v-model="queryDeptParams.subsectionType"
                            placeholder="请选择挂号时段"
                            clearable
                            size="small"
                            style="width:200px"
                    >
                        <el-option
                                v-for="dict in subsectionTypeOptions"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="dict.dictValue"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="挂号时间" prop="schedulingDay">
                    <el-date-picker
                            v-model="queryDeptParams.schedulingDay"
                            size="small"
                            style="width:240px"
                            value-format="yyyy-MM-dd"
                            type="date"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDeptQuery">搜索</el-button>
                    <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetDeptQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <!-- 部门数据表格开始 -->
            <el-table v-loading="loading" border :data="deptTableList" highlight-current-row @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="科室ID" align="center" prop="deptId" />
                <el-table-column label="科室名称" align="center" prop="deptName" :formatter="deptFormatter"/>
                <el-table-column type="index" :index="indexMethod" width="150%"  label="当前号数" align="center" prop="regNumber" />
            </el-table>
            <!-- 部门数据表格结束 -->
        </el-card></div>
</template>
<script>
    import moment from "moment";
    export default {
        data() {
            return {
                PatientList:[],
                // 遮罩层
                loading: false,
                // 选中部门Ids
                ids: [],
                userId:undefined,
                // 非单个禁用
                single: true,
                // 科室下拉列表数据
                deptOptions: [],
                // 性别数据字典
                sexOptions: [],
                //挂号时段
                DataByType:[],
                // 挂号类型
                schedulingTypeOptions: [],
                // 排班时段
                subsectionTypeOptions: [],
                // 挂号项目
                regItemOptions: [],
                // 患者信息查询参数
                patientParams: {
                    sex: '2'
                },
                //初始挂号数

                initialNumber:0,

                // 有号部门的查询条件
                queryDeptParams: {
                    //deptId: 101,
                    schedulingType: '1',
                    subsectionType: '1',
                    schedulingDay: moment(new Date()).format('YYYY-MM-DD'),
                     regItemId: 1,
                    // regItemAmount: undefined,
                },

                // 挂号费用
                regItemAmount: undefined,
                // 表单校验
                rules: {
                    name: [
                        { required: true, message: '患者姓名不能为空', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '手机号不能为空', trigger: 'blur' },
                        { pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' }
                    ],
                    idCard: [
                        { required: true, message: '身份证号不能为空', trigger: 'blur' }
                    ]
                },
                // 部门数据
                deptTableList: []
            }
        },
        watch: {
            patientParams: {
                handler: function() {
                    if (this.patientParams.birthday !== undefined) {
                        this.patientParams.age = this.getAge(this.patientParams.birthday.substring(0, 10))
                    }
                },
                deep: true
            }
        },
        created() {
            this.initSex();
            //加载部门
            this.initDept();

            this.getguahaoxiangmu();
            //加载挂号类型 急诊 门诊
            this.initschedulingType();
            //加载挂号时段
            this.initsubsectionType();

            // // 查询所有可用的挂号项目
            // selectAllRegisteredItem().then(res => {
            //     this.regItemOptions = res.data
            //     this.queryDeptParams.regItemId = this.regItemOptions[0].regItemId
            //     this.queryDeptParams.regItemAmount = this.regItemOptions[0].regItemFee
            // })
             // 设置查询时段
            // const subsectionType = this.getCurrentTimeType()
            // this.queryDeptParams.subsectionType = subsectionType




            // // 加载部门数据
             //this.getDeptForScheduling()
            //this.inituser()
        },
        methods: {
            //挂号编号
            indexMethod(index){
                return this.initialNumber?this.initialNumber:1;
            },
            // 根据输入的身份证号加载患者数据
            handleIdCardQuery() {
                this.$http.post("/doctor/patient/getByidCardAll/"+this.patientParams.idCard).then(result => {
                    this.patientParams=result.data.data;
                })
            },
            chongzhi(){
                this.patientParams='';
            },
            //初始化性别字典
            initSex(){
                this.$http.get("/system/api/dict/data/findByType/sys_user_sex").then(result=>{
                    this.sexOptions=result.data.data;
                })
            },
            //性别字典解析
            sexFormatter(row){
                let sex = row.sex;
                return this.formatDict2(this.sexOptions,sex);
            },

            //部门初始化
            initDept(){ //查询模糊条件中的部门信息
                this.$http.get("/system/api/dept/list").then(result=>{
                    this.deptOptions = result.data.data;
                })
            },


            deptFormatter(row) {
                let name = ''
                this.deptOptions.filter(item => {
                    if (row.deptId === item.deptId) {
                        name = item.deptName
                    }
                })
                return name
            },

            // 加载挂号类型 门诊急诊
            initschedulingType() {
                this.$http.get("system/api/dict/data/findByType/his_scheduling_type").then(result => {
                    this.schedulingTypeOptions = result.data.data;
                    //this.queryDeptParams.schedulingType=result.data.data[0].dictValue
                })
            },
            // // 解析 加载挂号类型
            schedulingTypeFormatter(row) {
                let v = row.schedulingType;
                return this.formatDict2(this.schedulingTypeOptions, v);
            },

            //加载挂号时段
            initsubsectionType(){
                this.$http.get("system/api/dict/data/findByType/his_subsection_type").then(result => {
                    this.subsectionTypeOptions = result.data.data;
                })
            },
            //解析挂号时段
            dataTypeFormatter(row) {
                let v = row.subsectionType;
                return this.formatDict2(this.subsectionTypeOptions, v);
            },
            getguahaoxiangmu(){
                this.$http.get("/doctor/patient/getAll").then(result=>{
                    this.regItemOptions=result.data.data;
                    this.queryDeptParams.regItemId=this.regItemOptions[0].regItemId
                    this.queryDeptParams.regItemAmount=this.regItemOptions[0].regItemFee
                })
            },
            // 更新挂号项目类型事件
            registeredItemChange(id) {
                this.regItemOptions.filter(item => {
                    if (id === item.regItemId) {
                        this.queryDeptParams.regItemId = item.regItemId
                        this.queryDeptParams.regItemAmount = item.regItemFee
                    }
                })
                // 动态显示挂号信息
                if (id === 1 || id === 2) {
                    this.queryDeptParams.schedulingType = '1'
                } else {
                    this.queryDeptParams.schedulingType = '2'
                }
                // 重新查询有号的部门
                this.getDeptForScheduling()
            },
            getDeptForScheduling() {
                this.$http.post("/doctor/scheduling/getDeptForScheduling",this.queryDeptParams).then(result=>{
                    this.deptTableList=result.data.data;
                    //alert(JSON.stringify(this.deptTableList))
                })
            },
            // 查询
            handleDeptQuery() {
                this.$http.post("/doctor/registration/queryDeptNumber/"+this.queryDeptParams.deptId).then(result=>{
                    this.initialNumber=result.data.data;
                })
                this.getDeptForScheduling()
            },
            // 重置
            resetDeptQuery() {
                //this.queryDeptForm={};
                this.queryDeptParams={
                    schedulingType: '1',
                    subsectionType: '1',
                    schedulingDay: moment(new Date()).format('YYYY-MM-DD'),
                    regItemId: 1,
                };

                //this.getDeptForScheduling()

            },
             // 表格选择中行事件
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.deptId)
                this.userId = selection.map(item => item.userId)
                this.single = selection.length !== 1
            },
             // 挂号收费
            handleRegistration() {
                this.$refs['form'].validate(vaid => {
                    console.log(vaid)
                    if (vaid) {
                        this.$confirm('是否确认给【' + this.patientParams.name + '】进行挂号?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            closeOnClickModal: false,
                            type: 'waring',
                            center: true
                        }).then(() => {

                delete this.patientParams.age
                //            取出要挂号的部门
                const deptId = this.ids[0]
                //            组装要提交到后台的挂号数据
                const param={
                    userId:this.userId[0],
                    registrationNumber:this.initialNumber+1,
                    deptId: deptId,
                    regItemId: this.queryDeptParams.regItemId,
                    regItemAmount: this.queryDeptParams.regItemAmount,
                    visitDate: moment(this.queryDeptParams.schedulingDay).format('YYYY-MM-DD'),
                    schedulingType: this.queryDeptParams.schedulingType,
                    subsectionType: this.queryDeptParams.subsectionType
                }
                //
                // 提交数据到后台
                this.$http.post("/doctor/patient/addPatient/",
                    {
                        patient1:this.patientParams,
                        registration2:this.queryDeptParams,
                        pvo:param}
                    ).then(result=>{

                    const registrationId = result.data.data;
                    //alert(registrationId)

                    this.$message({ showClose: true, message: '\'挂号成功 挂号单号为\''+registrationId, type: 'success' })
                    // 清空页面上的数据
                    this.resetDeptQuery()
                    this.patientParams = { sex: '2' }

                    this.$confirm('是否确认给挂号ID为【' + registrationId + '】的挂号收费?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        closeOnClickModal: false,
                        type: 'waring',
                        center: true
                    }).then(() => {
                        //重新查询挂号列表
                        this.$http.post('/doctor/registration/getRegId/'+registrationId).then(result=>{
                            this.getDeptForScheduling()
                            this.$message({ showClose: true, message: result.data.msg, type: 'success' })
                        }).catch(() => {
                            //this.$message({ showClose: true, message: result.data.msg, type: 'error' })
                        })

                    }).catch(() => {
                        this.$message({ showClose: true, message: '收费取消', type: 'error' })
                    })
                })
                        }).catch(() => {
                            this.$message({ showClose: true, message: '挂号取消', type: 'error' })
                        })
                    }

                })

            },

        }
    }
</script>
<style scoped>
    .box-card{
        padding: 0px;
        margin: 0px;
        margin-bottom: 8px;
    }
</style>
